<template>
  <view class="answer flex flex-col">
    <image v-if="question?.ifPic === 'y' && question?.bigPic" class="all-bg" mode="aspectFill" :src="question.bigPic" />
    <NavigationBar :navigation-title="`第${thday}关`" />
    <image v-if="question?.bigPic !== '1'" class="answer-bg" src="https://app5.shuguostar.cn/imgs/images/answer/bg.png" />
    <up-transition :show="true" :duration="1500" mode="fade" @after-enter="showContent = true">
      <view class="answer-content flex-1 transition">
        <view class="answer-progrss item-center flex">
          <view class="progress" :style="{ width: `${(666 / total) * (questionIndex)}rpx` }" />
          <text class="text">
            {{ `${questionIndex}/${total}` }}
          </text>
        </view>

        <view class="answer-main">
          <view class="answer-warp">
            <view class="answer-play flex items-center justify-center">
              <image class="icon" src="https://app5.shuguostar.cn/imgs/images/answer/icon_play.png" />
            </view>

            <view class="title">
              <text class="lable" :class="[question?.type === 'm' && 'm-lable']">
                {{ question?.type === 's' ? '单选题' : '多选题' }}
              </text>
              <text class="text">
                {{ question?.title }}
              </text>
            </view>

            <view v-if="question?.ifPic === 'y' && question.pic" class="image-box">
              <image class="img-bg" src="https://app5.shuguostar.cn/imgs/images/answer/img_bg.png" />
              <image class="image" :src="question?.pic" mode="aspectFill" />
            </view>

            <view v-for="item in question?.options" :key="item.id" class="answer-item" :class="[getSatus(item) === '1' ? 'item-correct' : getSatus(item) === '2' ? 'item-error' : getSatus(item) === '3' ? 'item-choose' : '']" @click="setChoose(item)">
              <text class="item-text">
                {{ item.optionTab }}. {{ item.description }}
              </text>
              <image v-if="showAnswer && ['1', '2'].includes(getSatus(item))" class="item-img" :src="`https://app5.shuguostar.cn/imgs/images/answer/icon_${getSatus(item) === '1' ? 'correct' : 'error'}.png`" />
            </view>
          </view>
        </view>
      </view>
    </up-transition>

    <view class="answer-btn">
      <text class="btn-text" @click="handleSumbit">
        提交本题
      </text>
    </view>

    <up-overlay :show="showOverlay" :opacity="0.8">
      <view class="finish-warp flex flex-col items-center">
        <image class="finish-text" src="https://app5.shuguostar.cn/imgs/images/answer/text.png" />
        <image class="finish-bg" src="https://app5.shuguostar.cn/imgs/images/answer/icon_bg.png" />
        <image class="finish-ip" src="https://app5.shuguostar.cn/imgs/images/answer/IP_1.png" />

        <view class="finish-content">
          <text class="text">
            正确率<text class="big-text">
              {{ Number(answerResult?.resultRate) * 100 }}
            </text>%
          </text>
        </view>

        <image class="close-icon" src="https://app5.shuguostar.cn/imgs/images/answer/icon_close.png" @click="closeOverlay" />
      </view>
    </up-overlay>
  </view>
</template>

<script setup lang="ts">
import NavigationBar from '@/components/navigation-bar/index.vue';
import { getNowBookQuestions, getSubmitAnwser } from '@/api/read';
import type { GetSubmitAnwserParams, GetSubmitAnwserResult, Option, QuestionResult } from '@/api/read/type';

const showContent = ref<boolean>(false);
const chooseAnswer = ref<Array<string>>([]);
const showAnswer = ref<boolean>(false);

const total = ref<number>(0);
const questionIndex = ref<number>(0);
const questionList = ref<Array<QuestionResult>>([]);
const question = ref<QuestionResult>();

const setChoose = (item: Option) => {
  if (showAnswer.value)
    return;
  if (question.value?.type !== 'm') {
    chooseAnswer.value = [item.optionTab];
    return;
  }
  const hasItem = chooseAnswer.value.filter(i => i === item.optionTab).length;
  if (hasItem) {
    chooseAnswer.value = chooseAnswer.value.filter(i => i !== item.optionTab);
  }
  else {
    chooseAnswer.value.push(item.optionTab);
  }
};

const showOverlay = ref<boolean>(false);
const thday = ref<string>('');
const cdId = ref<string>('');
const acsId = ref<string>('');
const start = () => {
  if (questionIndex.value + 1 > total.value) {
    return;
  }
  question.value = questionList.value[questionIndex.value];
  if (question.value.bigPic) {
    nextTick(() => {
      showContent.value = false;
    });
  }

  questionIndex.value++;
};

const getData = (cdId: string) => {
  getNowBookQuestions({ cdId }).then((res: { total: number; questions: Array<QuestionResult> }) => {
    questionList.value = res.questions;
    total.value = res.total;
    start();
  });
};

const getSatus = (item: Option) => {
  if (showAnswer.value) {
    if (chooseAnswer.value.includes(item.optionTab) && item.isCorrect === 'Y') {
      return '1';
    }
    else if (chooseAnswer.value.includes(item.optionTab) && item.isCorrect !== 'Y') {
      return '2';
    }
    else if (!chooseAnswer.value.includes(item.optionTab) && item.isCorrect === 'Y') {
      return '2';
    }
  }
  else {
    if (chooseAnswer.value.includes(item.optionTab)) {
      return '3';
    }
  }

  return '';
};

const answerResult = ref<GetSubmitAnwserResult>();
const handleSumbit = () => {
  const params: GetSubmitAnwserParams = {
    questionId: question.value!.id,
    acsId: acsId.value,
    anser: chooseAnswer.value.join(','),
  };

  showAnswer.value = true;
  getSubmitAnwser(params).then((res: GetSubmitAnwserResult) => {
    answerResult.value = res;
    setTimeout(() => {
      if (res.lastLevel === 'Y' && res.lastQuestion === 'Y') {
        uni.navigateTo({
          url: `/pages/views/answer/end?books=${res.books}&fonts=${res.fonts}&startDate=${res.course?.startDate}&endDate=${res.course?.endDate}&bookName=${res.course?.introductBook}`,
        });
      }
      else if (res.lastLevel === 'N' && res.lastQuestion === 'Y') {
        showOverlay.value = true;
      }
      else {
        start();
      }
      showAnswer.value = false;
      chooseAnswer.value = [];
    }, 1000);
  });
};

const closeOverlay = () => {
  showOverlay.value = false;
  uni.navigateBack();
};

onLoad((option: any) => {
  thday.value = option.thday;
  cdId.value = option.cdId;
  acsId.value = option.acsId;
  getData(option.cdId);
});

// 分享
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline'],
});
onShareAppMessage(() => {
  return {
    title: '雨果读书',
    imageUrl: 'https://app5.shuguostar.cn/imgs/images/home/share.png',
  };
});
</script>

<style lang="scss" scoped>
.answer {
  position: relative;
  min-height: 100%;
  padding-top: 188rpx;
  background: linear-gradient( 90deg, #4FB0FE 0%, #2B9BF6 100%);

  .all-bg {
    position: absolute;
    top: 0;
    height: 100%;
    width: 750rpx;
  }

  .answer-bg {
    position: absolute;
    top: 110rpx;
    left: 36rpx;
    width: 666rpx;
    height: 124rpx;
  }

  .answer-content {
    height: 100%;
    padding: 40rpx;
    overflow: auto;

    .answer-progrss {
      position: relative;
      width: 100%;
      height: 48rpx;
      background: rgba(0,0,0,0.5);
      border-radius: 24rpx;
      border: 2rpx solid rgba(255,255,255,0.08);
      overflow: hidden;

      .progress {
        height: 100%;
        background: #FCD24E;
        border-radius: 20rpx;
      }

      .text {
        position: absolute;
        top: 0;
        right: 32rpx;
        font-size: 24rpx;
        line-height: 48rpx;
        color: #fff;
      }
    }

    .answer-main {
      position: relative;
      margin: 84rpx 0 200rpx 0;
      z-index: 2;

      &::before {
        content: '';
        position: absolute;
        left: 30rpx;
        bottom: -28rpx;
        height: 400rpx;
        width: 626rpx;
        background: rgba(51,51,51,0.4);
        border-radius: 48rpx;
        z-index: -1;
        transform: translateZ(-2rpx);
      }

      &::after {
        content: '';
        position: absolute;
        left: 60rpx;
        bottom: -50rpx;
        height: 400rpx;
        width: 566rpx;
        background: rgba(51,51,51,0.2);
        border-radius: 40rpx;
        z-index: -1;
      }

      .answer-warp {
        padding: 48rpx 32rpx;
        background: #fff;
        border-radius: 48rpx;
      }

      .answer-play {
        position: absolute;
        top: -32rpx;
        right: -16rpx;
        width: 80rpx;
        height: 80rpx;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(28,24,24,0.08);

        .icon {
          width: 48rpx;
          height: 48rpx;
        }
      }

      .title {
        padding-bottom: 42rpx;

        .lable {
          display: inline-block;
          margin-right: 16rpx;
          padding: 0 16rpx;
          font-size: 24rpx;
          line-height: 48rpx;
          color: #fff;
          background: #22BF57;
          border-radius: 0 24rpx 24rpx 0;
        }

        .m-lable {
          border-radius: 42rpx 0 42rpx 0;
        }

        .text {
          font-size: 32rpx;
          line-height: 48rpx;
          color: #333;
        }
      }

      .image-box {
        position: relative;
        margin: 0 0 32rpx 0;
        padding: 28rpx 20rpx 28rpx 27rpx;
        width: 606rpx;
        height: 320rpx;

        .img-bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 606rpx;
          height: 320rpx;
        }

        .image {
          position: relative;
          border-radius: 25rpx;
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .answer-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 40rpx;
        margin-bottom: 32rpx;
        border-radius: 32rpx;
        border: 2rpx solid #C1C1C1;

        .item-text {
          font-size: 32rpx;
          line-height: 106rpx;
          color: #666666;
        }

        .item-img {
          width: 48rpx;
          height: 48rpx;
        }
      }

      .item-choose {
        border-color: #4AAAF8;
      }

      .item-correct {
        background: rgba(106,194,89,0.1);
        border-color: #6AC259;
      }

      .item-error {
        background: rgba(233,46,48,0.1);
        border-color: #E92E30;
      }
    }
  }

  .answer-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16rpx 40rpx;
    background: #fff;
    z-index: 3;

    .btn-text {
      display: block;
      font-size: 32rpx;
      line-height: 92rpx;
      text-align: center;
      background: #4AAAF8;
      color: #fff;
      border-radius: 46rpx;
    }
  }

  .finish-warp {
    position: relative;

    .finish-text {
      position: relative;
      width: 384rpx;
      height: 64rpx;
      z-index: 1;
    }

    .finish-bg {
      position: absolute;
      top: 40rpx;
      width: 540rpx;
      height: 380rpx;
    }

    .finish-ip {
      position: absolute;
      top: 108rpx;
      width: 200rpx;
      height: 240rpx;
    }

    .finish-content {
      position: relative;
      padding-top: 304rpx;
      z-index: 3;

      .text {
        display: block;
        font-size: 28rpx;
        line-height: 56rpx;
        color: #FFFDF2;

        .big-text {
          font-size: 40rpx;
          color: #FFF8D9;
        }
      }
    }

    .close-icon {
      margin-top: 64rpx;
      width: 64rpx;
      height: 64rpx;
    }
  }
}

:deep(.u-fade-enter-to) {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
